<template>
	<view class="page">
		<!-- <view class="header">
			<image class="back" src="../../static/tian/list.png" mode=""></image>
			<view class="text"></view>
			<image @click="history" class="icon" src="../../static/tian/lishi.png" mode=""></image>
		</view> -->
		<customNavbar :title="'WEB3.0'" :ids="'1'" @toTime="toTime" @send="getrightclick" />
		<view class="con">
			<view class="up_left">
				<view class="left_title">WEB3.0</view>
				<view class="left_text">
					<image class="up_right" src="../../static/tian/dao.png" mode=""></image>
					<view :class="showmore ? 'item_text':'item_texts'">{{$t('first.title64')}}</view>
					<img @click="changeshow" :class="showmore ? 'img':'imgs'" src="../../static/img/jiantou.png" alt="" />
				</view>
			</view>
			<view class="dao_down">
				<view class="bheader">
					<view class="item" @click="changeselect(index)" v-for="(item,index) in datalist">{{item.type_name}}
					</view>

					<view class="line" :style="styleObject"></view>
				</view>
				<view class="bcon">
					<view class="bconbox">
						<view class="bconbox1" :style="styleObject1">
							<view class="bcbitem" v-for="(item,index) in datalist">
								<view class="bcbitemcon">
									<view class="conitem">
										<view class="left">{{$t('first.title71')}}</view>
										<view class="right">
											<view>{{item.max_number }} U</view>
											<!-- <view class="jiantou"></view> -->
										</view>
									</view>
									<view class="conitem">
										<view class="left">{{$t('first.title72')}}:</view>
										<view class="right">
											<view>{{item.rate}}%</view>
											<!-- <view class="jiantou"></view> -->
										</view>
									</view>
									<view class="conitem">
										<view class="left">{{$t('first.title73')}}:</view>
										<view class="right">
											<!-- <view>{{item.max_number*item.rate / 100}} U</view> -->
											<view>{{item.max_number*item.rate*item.days}} U</view>
											<!-- <view class="jiantou"></view> -->
										</view>
									</view>
									<view class="conitem">
										<view class="left">{{$t('first.title137')}}:</view>
										<view class="right">
											<view>{{item.days}}</view>
										</view>
									</view>
									<!-- 预计一周收益 -->
									<!-- <view class="conitem">
										<view class="left">{{$t('first.title118')}}:</view>
										<view class="right">
											<view>{{item.zhou}} U</view>
										</view>
									</view> -->
									<button :disabled="isDisable" class="btns"
										@click="toBuy(item.id)">{{$t('first.title70')}}</button>
								</view>
							</view>



							<!-- <view class="bcbitem">
								<view class="bcbitemcon">
									<view class="conitem">
										<view class="left">{{$t('first.title71')}}</view>
										<view class="right">
											<view>500000 U</view>
											<view class="jiantou"></view>
										</view>
									</view>
									<view class="conitem">
										<view class="left">{{$t('first.title72')}}:</view>
										<view class="right">
											<view>2%</view>
											<view class="jiantou"></view>
										</view>
									</view>
									<view class="conitem">
										<view class="left">{{$t('first.title73')}}:</view>
										<view class="right">
											<view>245714 U</view>
											<view class="jiantou"></view>
										</view>
									</view>
									<view class="btns">{{$t('first.title70')}}</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavbar from '../index/navigationBar.vue'
	export default {
		components: {
			customNavbar
		},
		data() {
			return {
				datalist: [],
				selcet: 0,
				styleObject: {
					transform: 'translateX(62rpx) translateX(-50%)',
					transitionDuration: '0.3s'
				},
				styleObject1: {
					transform: 'translateX(0px)'
				},
				isDisable:false,
				showmore:true
			}
		},
		onLoad(e) {

			this.getlist();

		},
		methods:{
			changeshow(){
				this.showmore = !this.showmore
			},
			changeselect(e){
				this.selcet = e;
				if (e == 0) {
					this.styleObject.transform = 'translateX(62rpx) translateX(-50%)'
					this.styleObject1.transform = 'translateX(0)'
				} else if (e == 1) {
					this.styleObject.transform = 'translateX(182rpx) translateX(-50%)'
					this.styleObject1.transform = 'translateX(-608rpx)'
				} else if (e == 2) {
					this.styleObject.transform = 'translateX(304rpx) translateX(-50%)'
					this.styleObject1.transform = 'translateX(-1216rpx)'
				} else if (e == 3) {
					this.styleObject.transform = 'translateX(424rpx) translateX(-50%)'
					this.styleObject1.transform = 'translateX(-1824rpx)'
				} else {
					this.styleObject.transform = 'translateX(548rpx) translateX(-50%)'
					this.styleObject1.transform = 'translateX(-2432rpx)'
				}
			},
			getrightclick: function(res) {
				uni.navigateTo({
					url: './mydaoList'
				})
			},
			toBuy(id) {



				var data = {
					type_id: id,

				};
				this.isDisable = true
				setTimeout(() => {
					this.isDisable = false //点击一次时隔两秒后才能再次点击
				}, 2000)
				this.$utils.initDataToken({
					url: 'diamond_finance/submit',
					data: data,
					type: 'post'
				}, (res, msg) => {


					this.$utils.showLayer(msg);

				});

			},
			getlist() {


				this.$utils.initDataToken({
					url: 'diamond_finance/types',

					type: 'get'
				}, (res, msg) => {

					this.datalist = res.data[0].types
					// this.$utils.showLayer(msg); 

				});


			},
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.page {
		width: 100%;
		height: 100%;
		min-height: 110vh;
		background-color: #ecf0f5;
	}

	.header {
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}

	.back {
		width: 48rpx;
		height: 48rpx;
	}

	.header .text {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #222;
	}

	.header .icon {
		width: 44rpx;
		height: 44rpx;
	}

	.con {
		width: 100%;
		min-height: 720rpx;
		background: #ffe4aa;
		padding: 50rpx 50rpx 100rpx 50rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
	}

	.up_left {
		width: 100%;
	}

	.up_left .item_text{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		font-size: 25rpx;
		color: #686868;
		line-height: 40rpx;
	}
	.up_left .item_texts{
		font-size: 25rpx;
		line-height: 40rpx !important;
		color: #686868;
	}
	
	.up_left .img{
		display: block;
		width: 20px;
		height: 20px;
		margin: 0 auto;
		margin-top: 10px;
		cursor: pointer;
	}
	.up_left .imgs{
		display: block;
		width: 20px;
		height: 20px;
		margin: 0 auto;
		margin-top: 10px;
		cursor: pointer;
		transform: rotate(180deg);
	}
	.left_title{
		font-size: 48rpx;
		font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
		font-weight: 700;
		color: #202020;
		margin-bottom: 24rpx;
	}

	.left_text {
		font-size: 28rpx;
		font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
		font-weight: 400;
		color: #686868;
	}

	.up_right {
		width: 226rpx;
		height: 242rpx;
		float: right;
		margin-left: 20rpx;
	}

	.dao_down {
		position: absolute;
		top: 80%;
		width: 90%;
		right: 5%;
		left: 5%;
		background: #fff;
		box-shadow: 0 0.21333rem 0.37333rem 0 rgb(48 50 72 / 12%);
		border-radius: 50rpx;
		padding: 34rpx;
		box-sizing: border-box;
	}

	.bheader {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.item {
		position: relative;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 8rpx;
		color: #323233;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 86rpx;
		cursor: pointer;

		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: center;
	}

	.line {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 80rpx;
		height: 6rpx;
		background: #ffb105;
		border-radius: 8rpx;
	}

	.bcon {
		overflow: hidden;
	}

	.bconbox {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		will-change: left;
		overflow: hidden;
		transform: translateZ(0);
		cursor: grab;
		user-select: none;
	}

	.bconbox1 {
		transition-duration: 300ms;
		width: 3040rpx;
		display: flex;
		height: 100%;
	}

	.bcbitem {
		flex-shrink: 0;
		box-sizing: border-box;
		height: 100%;
		position: relative;
		width: 608rpx;
	}

	.bcbitemcon {
		width: 100%;
		min-height: 462rpx;
		background: #fff;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.conitem {
		margin-bottom: 30rpx;
		overflow: hidden;
		border-radius: 20rpx;
		width: 100%;
		height: 92rpx;
		background: #fff;
		border: 2rpx solid #dadada;
		box-sizing: border-box;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx 32rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
	}

	.conitem .left {
		flex: 1;
		text-align: left;
	}

	.conitem .right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		font-weight: bold;
		font-size: 32rpx;
	}

	.btns {
		width: 100%;
		height: 96rpx;
		background: #ffb105;
		border-radius: 75rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #23262f;
	}

	.jiantou {
		width: 0;
		height: 0;
		border-bottom: 8rpx solid transparent;
		border-top: 8rpx solid #797979;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		margin-top: 5%;
		margin-left: 18rpx;
	}
</style>